<template>
  <div class="homebox">
    <div class="top">饿了么</div>
    <div>
      <van-search
        v-model="value"
        shape="round"
        background="#4fc08d"
        placeholder="请输入搜索关键词"
      />
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerlist" :key="index">
          <img
            :src="item.bannerUrl"
            alt=""
            style:height="100px"
            bottom="80px"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <h2>猜你喜欢</h2>
    </div>
    <div class="paixu">
      <span v-for="(item, index) in paixu" :key="index">{{ item.text }}</span>
    </div>
    <div class="hotshop">
      <span v-for="(item, index) in hotshop" :key="index">{{ item.name }}</span>
    </div>
    <div class="food">
      <div
        @click="toDetail(item.mtWmPoiId)"
        class="foodlist"
        v-for="(item, index) in foodlist"
        :key="index"
      >
        <div class="img-box">
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="trano">
          <div class="name">{{ item.name }}</div>
          <div>{{ item.monthSalesTip }}</div>
          <div>
            {{ item.minPriceTip }} <span>远距离{{ item.shippingFeeTip }}</span>
          </div>
          <div>{{ item.info }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { banner_list, shop_list } from "../../api/index";
import { onMounted, ref } from "vue";
var bannerlist = ref([]);
var das = ref([]);
var foodlist = ref([]);
var paixu = ref([
  { id: 1, text: "综合排序" },
  { id: 2, text: "距离最近" },
  { id: 3, text: "销量最高" },
  { id: 4, text: "筛选" },
]);
var hotshop = ref([
  { id: 1, name: "年货节热卖" },
  { id: 2, name: "津贴联盟" },
  { id: 3, name: "满减优惠" },
  { id: 4, name: "品质联盟" },
]);
onMounted(() => {
  banner_list().then((res) => {
    bannerlist.value = res.data.list;
  });
  shop_list().then((res) => {
    foodlist.value = res.data.list;
  });
});
</script>
<style scoped>
.top {
  height: 40px;
  color: #fff;
  background-color: #0098fe;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe__track {
  height: 100%;
  box-sizing: border-box;
}
.banner {
  height: 120px;
}
.my-swipe {
  height: 100%;
}
.paixu {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
.hotshop {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.hotshop span {
  padding: 10px;
  background-color: #f3f3f3;
}
.food .foodlist img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.foodlist {
  display: flex;
  height: 80px;
  margin-bottom: 20px;
}

.trano {
  flex: 1;
  font-size: 12px;
}

.trano .name {
  font-weight: 700;
  font-size: 16px;
}
</style>